<template>
    <c-template>
        <div class="auth-top mb50 ft16 color101 fwbold">
            <div>{{$t('authMenu.roleName')}}：{{names}}</div>
            <div class="mt15">{{$t('authMenu.roleId')}}：{{nameId}}</div>
        </div>
        <h2 class="mb20 color101 ft16">{{$t('authMenu.menuList')}}</h2>
        <div class="form-list">
            <el-tree :data="lists" show-checkbox ref="rootTree" node-key="id" :default-checked-keys="have" :props="defaultProps" style="clear: left">
            </el-tree>
        </div>
        <div class="text-right mt-md">
            <el-button @click="addbtn">{{ $t('authMenu.authorize') }}</el-button>
        </div>
    </c-template>
</template>

<script>
import vueEvents from '@/assets/js/Event'
import qs from "qs";
export default {
    data () {
        return {
            lists: [],
            have: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            names: '',
            nameId: '',
            data: '',
            form: {
                type: []
            },
            checked: true,
        }
    },
    mounted () {
        var val = JSON.parse(sessionStorage.getItem('ids'))
        this.names = val.name;
        this.nameId = val.id;
        this.rolelist(this.nameId)
    },
    methods: {
        rolelist (id) {
            this.$get({
                url: '/role/menu/' + id,
                params: {}
            }).then(res => {
                this.lists = res;
                this.findAllChildren(this.lists, this.have);
            })
        },
        findAllChildren (data, arr) {
            data.forEach((item, index) => {
                if (item.children.length !== 0) {
                    this.findAllChildren(item.children, arr);
                } else if (item.have) {
                    arr.push(item.id);
                }
            })
        },
        handleChange (val, id) {
            // console.log(val)
            // console.log(id)
        },
        addbtn () {
            var aKey = this.$refs.rootTree.getCheckedKeys().concat(this.$refs.rootTree.getHalfCheckedKeys())
            var menuIds = aKey.toString();
            this.$get({
                url: '/role/authority/menu',
                params: {
                    menuIds: menuIds,
                    roleId: this.nameId,
                }
            }).then(res => {
                this.$message({
                    type: 'success',
                    message: '授权成功'
                });
                this.$router.push('role')
            })
        },
    }
}
</script>
<style scoped lang="scss">
.auth-menu-page {
    padding: 80px 0 0 20px;
}
.form-list {
    border: 1px solid #e8e8e8;
    border-top-width: 0;
}
/deep/ .el-tree-node__content {
    height: auto;
    padding-top: 10px !important;
    padding-bottom: 10px;
    border-top: 1px solid #e8e8e8;
}
</style>
